<template>
	<view class="content">
		<view class="tabs-box">
      <u-tabs 
        :list="tabsList" 
        :is-scroll="false" 
        :current="tabsCurrent"
        bar-width="100"
        bar-height="4"
        :bold="false"
        @change="tabsChange"></u-tabs>
    </view>
    <view class="tabs-content">
      <swiper class="swiper" :current="swiperCurrent" @change="changefinish">
        <swiper-item class="swiper-item" v-for="(item, index) in tabsList" :key="index">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
            <template v-if="loadStatus != 'nomore' || list.length">
              <view class="list-box">
                <order-item
                  v-for="(info, idx) in list"
                  :key="idx"
                  :type="userInfo.id == info.ofdUid"
                  :time="info.uuniDate"
                  :price="info.uuniMoney"
                  :number="info.uuniJiner"
                  :status="item.name"
          
                  ></order-item>
              </view>
              <view class="loading">
                <u-loadmore :status="loadStatus" />
              </view>
            </template>
            <template v-else>
              <view>
                <u-empty text="暂时没有订单信息~" mode="list"></u-empty>
              </view>
            </template>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
	</view>
</template>

<script>
  import {
  	CUser
  } from '@/common/cache/user.js'
  var cache_user = new CUser();
	export default {
		data() {
			return {
        tabsList: [{
          name: '已成交'
        }],
        tabsCurrent: 0,
        swiperCurrent: 0,
        loadStatus: 'loadmore',
        list: [],
        page: 1,
        pageSize: 20,
        stateIndex: [0] ,// 状态传递
        userInfo: {},
		coinType :0
			};
		},
    onLoad(e) {
		this.coinType = e.coinType;
      this.onreachBottom()
      this.getUserInfo()


    },
    methods: {
      getUserInfo () {
        cache_user.userinfo().then((res) => {
          this.userInfo = res
        })
      },

			tabsChange(index) {
				this.swiperCurrent = index;
			},
			changefinish(e) {
				let current = e.detail.current;
				this.swiperCurrent = current;
				this.tabsCurrent = current;
        this.page = 1
        this.list = []
        this.loadStatus = 'loadmore'
        this.onreachBottom()
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.loadStatus == 'loadmore') {
          this.loadStatus = 'loading'
          this.getList().then((res) => {
            if (res.status == 200) {
              this.list = this.list.concat(res.data)
              if (res.data.length < this.pageSize) {
                this.loadStatus = 'nomore'
              } else {
                this.loadStatus = 'loadmore'
              }
            } else {
              this.$api.msg(res.msg)
              this.loadStatus = 'loadmore'
            }
          })
        }
			},
      // 获取列表
      getList () {
        uni.showLoading({
          mask: true
        })
        return new Promise((resolve) => {
          let param = `coinType=${this.coinType}&page=${this.page++}`
          this.$api.http
          .get(`assistance/tradinghall/pay_invest_lists?${param}`)
          .then((res) => {
            uni.hideLoading()
            resolve(res)
          })
        })
      },
    }
	}
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: $bg-theme;
}
.content {
  height: 100%;
}
.tabs-content {
  height: calc(100% - 80rpx);
}
.swiper {
  height: 100%;
}
.loading {
  padding: 16rpx 0;
}
</style>
